<template>
    <el-form ref="form" :model="form" label-width="80px">
         <el-form-item label="标题">
            <el-input v-model="form.title"></el-input>
         </el-form-item>

          <!-- 富文本框的配置 
          v-model是我们富文本框的内容
          editorToolbal是我们工具栏的配置
          useCustomImageHandler是一个布尔值如果为true就可以自定义上传图片的方法
          定义完后可以监听一个事件
          image-added然后调用一个函数进行图片的上传
          发送 ajax 请求-->
          <el-form-item label="内容">
            <vue-editor 
            :useCustomImageHandler="true"
            @image-added="imgUpload"
            v-model="form.content"
            :editorToolbar="customToolbar"
            ></vue-editor>
          </el-form-item>

         <el-form-item label="栏目">
            <el-checkbox-group v-model="form.categories">
                <!-- 我们不仅仅需要一个中文
                我们的分类其实是有 名字 name, id
                我们的 lable 应该是我们分类的 id
                而将分类的名字作为内容渲染出来 使用 {{.name}} -->
                <!-- <el-checkbox label="id">name</el-checkbox> -->
                <!-- 我们需要使用 ajax 获取分类数据然后 遍历渲染出这些选项 -->
                <el-checkbox 
                v-for="(item, index) in categoryList"
                :key="index"
                :label="item.id">
                {{item.name}}
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item> 

        <el-form-item>
            <!-- 这个组件直接将我们上传图片的工作接管
            action 使我们上传图片的接口路径
            on-remove 当我们删除一个图片的时候会触发 
            headers 使我们要带上请求时验证的 token
            这里在模板当中是没有办法直接获取我们的 localStorage 的
            需要现在 data 当中定义这个 token 这里在赋值
            handlesuccess回调函数是图片上传成功后获取封面图片id的方法-->
            <el-upload
                :action="$axios.defaults.baseURL + '/upload/'"
                list-type="picture-card"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :headers="{Authorization:token}">
                <i class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>


        <el-form-item label="类型">
            <el-radio v-model="form.type" label="1">文章</el-radio>
            <el-radio v-model="form.type" label="2">视频</el-radio>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>

    </el-form>

    
</template>

<script>
// 引入富文本插件
import {VueEditor} from "vue2-editor";
export default {
  // 注册富文本框组件
    components:{
        VueEditor
    },
    data(){
      return{
        token:localStorage.getItem('token'),
        form:{
              title:'',
              categories:[],
              type:'',
              content:'<h1>pinkman!!!!!!</h1>',
              cover:[]
        },
        categoryList:[],
        // 文本框工具栏的配置
        customToolbar: [["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }], ["image", "code-block"]]
      }
    },
    mounted(){
      this.$axios({
        url:'/category',
        method:'get'
      }).then(res=>{
        const {data} = res.data; 
        console.log(data);
        // 因为关注和头条分类并不需要我们手动去设置，所以应该过滤掉
        const newCategoryList = [];
        data.forEach(element=>{
            if(element.id!=0 && element.id!=999){
                newCategoryList.push(element);
            }
        });
        this.categoryList = newCategoryList;
      })
    },
    methods:{
      onSubmit(){
        // 转换form.categories成api所需要的格式
        const newArr = [];
        this.form.categories.forEach(element=>{
            newArr.push({
              id:element
            })
        })
        this.form.categories = newArr;

        // 将form.cover转换成api所需要的格式
        const newArrCover = [];
        this.form.cover.forEach(element=>{
          newArrCover.push({
            id:element
          })
        })
        this.form.cover = newArrCover;
        console.log(this.form);

        // 发送ajax请求发布文章
        this.$axios({
          url:'/post',
          method:'post',
          data:this.form
        }).then(res=>{
          const {data} = res.data;
          console.log(data);
        })
      },
      imgUpload(file, Editor, cursorLocation, resetUploader){
        // 先转换成二进制流
        var formData = new FormData();
        // 根据api文档配置属性名
        formData.append("file", file);
        
        this.$axios({
                url: "/upload",
                method: "POST",
                data: formData
        }).then(res => {
                const {data} = res.data;
                // 想要的图片地址就在data.url
                let url = this.$axios.defaults.baseURL + data.url;
                // 将返回的图片地址放入编辑器当中
                Editor.insertEmbed(cursorLocation, "image", url);
                resetUploader();
            }).catch(err => {
                console.log(err);
          });
      },
      handleRemove(){
        console.log('删除了图片');
      },
      handleSuccess(res){
        this.form.cover.push(res.data.id);
      }
    }
}
</script>

<style>

</style>